const path = require("path");
// 引入html插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
        // mode:"none",

        // 清除上一次打包的文件
        clean: true,
    },
    mode: "production",
    // 使得错误代码能够精准对应到源代码的行数
    devtool: "inline-source-map",
    // 配置模块
    module: {
        // 规则
        rules: [{
                test: /\.css$/i,
                use: [
                    // 不需要style-loader 用插件MiniCssExtractPlugin
                    // "style-loader", 
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ],
            }, {
                test: /\.png$/,
                type: "asset/resource",
                // 这个类型会发送一个单独的文件，并导出url
            },
            {
                test: /\.svg$/,
                type: "asset/inline",
                // base64格式的图片
            }, {
                test: /\.txt$/,
                type: "asset/source"
                    // 导出资源的源代码
            },
            {
                test: /\.jpg$/,
                type: "asset",
                // 解析器
                parser: {
                    dataUrlCondition: {
                        maxSize: 4 * 1024 * 1024,
                        // 4mb
                        // 4*1024 == 4kb
                    }
                }
            }
        ],
    },
    // 插件数组
    plugins: [
        // 调用html插件
        new HtmlWebpackPlugin({
            // 模板 使用那个html作为模板去打包
            template: "./index.html",
            // 名称
            filename: "myhtml.html",
            // 不在头部引入，在body引入
            inject: "body",
        }),
        new MiniCssExtractPlugin({
            // [contenthash]表示以哈希值命名打包的文件
            filename: "style/[contenthash].css",
        }),
    ],
    // 优化
    optimization: {
        minimizer: [
            // 使用压缩css的插件
            new CssMinizerPlugin(),
        ]
    }
}